<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true" />

    <title>WEBSOCKET Math iink always connected</title>

    <link rel="stylesheet" href="../examples.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
          integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
          crossorigin="anonymous">

    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
            integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
    <div id="result"></div>
    <div>
      <nav>
        <div class="button-div">
          <button id="clear" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
            <img src="../assets/img/clear.svg">
          </button>
          <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
            <img src="../assets/img/undo.svg">
          </button>
          <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
            <img src="../assets/img/redo.svg">
          </button>
        </div>
        <div class="spacer"></div>
        <button class="classic-btn" id="convert" disabled>Convert</button>
      </nav>
      <div id="editor" touch-action="none"></div>
    </div>
    <script>
      const editorElement = document.getElementById('editor');
      const resultElement = document.getElementById('result');
      const undoElement = document.getElementById('undo');
      const redoElement = document.getElementById('redo');
      const clearElement = document.getElementById('clear');
      const convertElement = document.getElementById('convert');

      editorElement.addEventListener('changed', (event) => {
        undoElement.disabled = !event.detail.canUndo;
        redoElement.disabled = !event.detail.canRedo;
        clearElement.disabled = event.detail.isEmpty;
      });

      function cleanLatex(latexExport) {
        if (latexExport.includes('\\\\')) {
          const steps = '\\begin{align*}' + latexExport + '\\end{align*}';
          return steps.replace("\\overrightarrow", "\\vec")
            .replace("\\begin{aligned}", "")
            .replace("\\end{aligned}", "")
            .replace("\\llbracket", "\\lbracket")
            .replace("\\rrbracket", "\\rbracket")
            .replace("\\widehat", "\\hat")
            .replace(new RegExp("(align.{1})", "g"), "aligned");
        }
        return latexExport
          .replace("\\overrightarrow", "\\vec")
          .replace("\\llbracket", "\\lbracket")
          .replace("\\rrbracket", "\\rbracket")
          .replace("\\widehat", "\\hat")
          .replace(new RegExp("(align.{1})", "g"), "aligned");
      }

      editorElement.addEventListener('exported', (evt) => {

        const exports = evt.detail.exports;
        if (exports && exports['application/x-latex']) {
          convertElement.disabled = false;
          katex.render(cleanLatex(exports['application/x-latex']),  resultElement);
          // resultElement.innerHTML = '<span>' + exports['application/x-latex'] + '</span>';
        } else if (exports && exports['application/mathml+xml']) {
          convertElement.disabled = false;
          resultElement.innerText = exports['application/mathml+xml'];
        } else if (exports && exports['application/mathofficeXML']) {
          convertElement.disabled = false;
          resultElement.innerText = exports['application/mathofficeXML'];
        } else {
          convertElement.disabled = true;
          resultElement.innerHTML = '';
        }
      });
      undoElement.addEventListener('click', () => {
        editorElement.editor.undo();
      });
      redoElement.addEventListener('click', () => {
        editorElement.editor.redo();
      });
      clearElement.addEventListener('click', () => {
        editorElement.editor.clear();
      });
      convertElement.addEventListener('click', () => {
        editorElement.editor.convert();
      });

      /**
       * Attach an editor to the document
       * @param {Element} The DOM element to attach the ink paper
       * @param {Object} The recognition parameters
       */
      iink.register(editorElement, {
        recognitionParams: {
          type: 'MATH',
          protocol: 'WEBSOCKET',
          server: {
            scheme: 'https',
            host: 'webdemoapi.myscript.com',
            applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
            hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
          },
          iink: {
            alwaysConnected: false,
            math: {
              mimeTypes: ['application/x-latex']
            }
          }
        }
      });

      window.addEventListener('resize', () => {
        editorElement.editor.resize();
      });
    </script>
  </body>

</html>